<template>
  <div class="oto-page">
    <div class="head">
      <span>
        <van-icon name="arrow-left" @click="$router.go(-1)" style="text-align:left" />
      </span>
      <span>一对一辅导</span>
      <span>
        <van-icon name="search" class="right" @click="getSearch" />
      </span>
    </div>
    <div class="oto-filter">
      <div class="of-head">
        <div :class="active==1?'active':''" @click="setFilter(1)">
          <font>选择上课时间</font>
          <i></i>
        </div>
        <div :class="active==2?'active':''" @click="setFilter(2)">
          <font>选择老师条件</font>
          <i></i>
        </div>
      </div>
      <div class="time-module" v-show="active==1">
        <div class="time-date">
          <p class="time-block">日期</p>
          <van-row type="flex" justify="space-around">
            <van-col v-for="(item,index) in week" :key="index">
              <span class="time-week">{{item}}</span>
            </van-col>
          </van-row>
          <div class="time-day">
            <p @click.stop="selectDay(item)" v-for="(item,index) in day_list" :key="index">
              <font
                :class="selectTime.day == item.day ? 'active': isToday == item.day ? 'today': item.disable == 0 ? 'disable':''"
              >
                {{item.day}}
                <span v-if="item.day == isToday" class="time-today">今天</span>
              </font>
            </p>
          </div>
        </div>
        <div class="time-rinle">
          <p class="time-block">时段</p>
          <div class="tr-ipt">
            <p @click="openPicker('startTime')">
              <input placeholder="开始时间" :value="studyTime.startTime" disabled="disabled" />
              <i></i>
            </p>
            <font>-</font>
            <p @click="openPicker('endTime')">
              <input placeholder="结束时间" :value="studyTime.endTime" disabled="disabled" />
              <i></i>
            </p>
          </div>
        </div>
      </div>
      <div class="teacher-module" v-show="active==2">
        <div class="tm-kind">
          <p>老师类型</p>
          <div class="tmk-item">
            <span
              :class="teachSearch.level_id == item.level_id ? 'active':''"
              v-for="item in teachLeve"
              :key="item.level_id"
              @click="teachSearch.level_id = item.level_id"
            >{{item.level_name}}</span>
          </div>
        </div>
        <div class="tm-kind">
          <p>只看</p>
          <van-checkbox-group v-model="ready">
            <van-checkbox name="1" shape="square" >
              <img slot="icon" slot-scope="props" :src="props.checked ? select : unselect" />已关注
            </van-checkbox>
            <van-checkbox name="2" shape="square" >
              <img slot="icon" slot-scope="props" :src="props.checked ? select : unselect" />上过课的
            </van-checkbox>
          </van-checkbox-group>
        </div>
        <div class="tm-kind">
          <p>性别</p>
          <div class="tmk-item">
            <span
              :class="teachSearch.sex === item.sex ? 'active':''"
              v-for="item in sexs"
              :key="item.sex"
              @click="teachSearch.sex = item.sex"
            >{{item.name}}</span>
          </div>
        </div>
        <div class="tm-kind" v-for="(item,index) in attrList" :key="index">
          <p>{{item.attr_name}}</p>
          <div class="tmk-item">
            <span
              :class="teachSearch.attr_val_id['attr'+index] == it.attr_val_id ? 'active':''"
              v-for="it in item.child"
              :key="it.attr_val_id"
              @click="selectId(it.attr_val_id,index)"
            >{{it.attr_val_name}}</span>
          </div>
        </div>
      </div>
      <div class="oto-btn" v-show="active!=0">
        <button @click="reset">重置</button>
        <button @click="search">确定</button>
      </div>
    </div>
    <p v-if="keywords" class="oto-title">"{{keywords}}"搜索结果</p>
       <List class="oto-content"></List>
      
    <van-popup v-model="timeShow" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentTime"
        type="time"
        :min-hour="0"
        :max-hour="23"
        @confirm="successHanlder"
        @cancel="timeShow=false"
      />
    </van-popup>
    <!-- <van-dialog v-model="show" @confirm="toLogin" confirm-button-text="立即登录">
      <i class="close" @click="show=false"></i>
      <img src="../../assets/images/feiji.png" />
      <p class="LoginText">赶紧登录一下吧</p>
      <p class="message">立即预约一对一辅导，浏览更多视频课程~</p>
    </van-dialog> -->
  </div>
</template>

<script>
import { Checkbox, CheckboxGroup ,Icon,Col, Row,Popup,DatetimePicker,Dialog} from 'vant';
import { otoList,userInfo ,otoconditon} from "../../request/api.js";
import List from "../oto/otoList.vue"
export default {
  components: {
    [Icon.name]: Icon,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Col.name]: Col,
    [Row.name]: Row,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
    [Dialog.name]: Dialog,
    List
  },
  data() {
    return {
      show: false,
      active: 0,
      week: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      day_list: [],
      isToday: 0,
      studyTime: {
        startTime: "",
        endTime: "",
        init: function() {
          this.startTime = "";
          this.endTime = "";
        }
      },
      selectTime: {
        year: "",
        month: "",
        day: ""
      },
      teachSearch: {
        level_id: "",
        attr_val_id: {},
        is_collect: 0,
        is_attended: 0,
        sex: "",
        init: function() {
          this.sex = "";
          this.attr_val_id = {};
          this.level_id = "";
        }
      },
      timeShow: false,
      currentTime: "",
      teachLeve: [],
      attrList: [],
      sexs: [
        { name: "男", sex: 0 },
        { name: "女", sex: 1 }
      ],
      ready: [],
      select: require("../../assets/theme-img/checkbox-select.png"),
      unselect: require("../../assets/images/un-select.png"),
      otoCourse: [],
      params: {},
      keywords: "",
      user_arrt_id: "",
      start: false,
      userInfo:{}
    };
  },
  watch: {
    ready: {
      handler(val) {
        if (val.includes("2")) {
          this.teachSearch.is_attended = 1;
        } else {
          this.teachSearch.is_attended = 0;
        }
        if (val.includes("1")) {
          this.teachSearch.is_collect = 1;
        } else {
          this.teachSearch.is_collect = 0;
        }
      },
      deep: true
    },
    // $route(val) {
    //   if (val.name == "oto") {
    //     if (this.$store.state.keywords) {
    //       this.keywords = this.$store.state.keywords;
    //       this.studyTime.init();
    //       this.selectTime = {};
    //       this.ready = [];
    //       this.teachSearch.init();
    //       this.params = {
    //         teacher_name: this.keywords
    //       };
    //       this.$store.commit("OTO_KEY");
    //     } else {
    //       if (this.params.teacher_name) {
    //         this.params.teacher_name = "";
    //         this.keywords = "";
    //       }
    //     }
    //     this.$refs.list.reset();
    //   }
    // }
  },
  methods: {
    getSearch() {
      this.$router.push({ name: "search" });
    },
    toOtoPlan(item){
      if(!localStorage.adminToken){
        this.show = true;
        return;
      }
      // this.$alert(localStorage.adminToken)
      this.$router.push({
        name: 'OtoPlan', 
        query:{id: item.teacher_id}
      })
    },
    setFilter(num) {
      if (num == this.active) {
        this.active = 0;
      } else {
        this.active = num;
      }
    },
    // 时间
    selectDay(val) {
      if (val.disable == 0) {
        return;
      }
      this.selectTime = val;
    },
    setDay() {
      let { days, day } = this.$pub.initDays();
      this.isToday = day;
      this.day_list = days;
    },
    openPicker(name) {
      this.currentTime = this.studyTime[name];
      this.timeChoose = name;
      this.timeShow = true;
    },
    successHanlder(val) {
      this.studyTime[this.timeChoose] = val;
      this.timeShow = false;
    },
    // 老师
    getotoCourseOptions() {
      otoconditon().then(res => {
        this.teachLeve = res.data.otoTeacherLevel;
        this.attrList = res.data.attrList;
        // 默认选定该学员所在年级
        if (this.user_arrt_id) {
          res.data.attrList.forEach((it, idx) => {
            if (it.attr_name == "年级") {
              this.$set(
                this.teachSearch.attr_val_id,
                "attr" + idx,
                this.user_arrt_id
              );
              return;
            }
          });
        }
      });
    },
    selectId(id, index) {
      this.$set(this.teachSearch.attr_val_id, "attr" + index, id);
    },
    reset() {
      if (this.active == 1) {
        this.studyTime.init();
        this.selectTime = {};
      } else {
        this.ready = [];
        this.teachSearch.init();
      }
      this.search();
    },
    search() {
      this.keywords = "";
      this.active = "";
      this.params = this.getParams();
      this.reset();
    },
    getParams() {
      let startDay = "";
      if (this.selectTime.year) {
        startDay =
          this.selectTime.year +
          "-" +
          this.selectTime.month +
          "-" +
          this.selectTime.day;
      }
      let params = {
        start_time: this.studyTime.startTime
          ? startDay + " " + this.studyTime.startTime
          : startDay
          ? startDay + " 00:00:00"
          : "",
        end_time: this.studyTime.endTime
          ? startDay + " " + this.studyTime.endTime
          : startDay
          ? startDay + " 23:59:59"
          : "",
        level_id: this.teachSearch.level_id,
        is_collect: this.teachSearch.is_collect,
        is_attended: this.teachSearch.is_attended,
        sex: this.teachSearch.sex,
      };
      params.attr_val_id = this.$pub.objToStr(
        this.teachSearch.attr_val_id,
        ","
      );
      return params;
    },
    onGetdata(data) {
      this.otoCourse = data;
 
    },
    onFinishdata() {
      if(this.otoCourse.length==0 || this.params["attr_val_id"]){
        this.params.attr_val_id = 0;
        this.$refs.list.reset();
      }
    },
    toLogin(){
      this.$router.push({
        name:'Login'
      })
    }
  },
   created() {
    if (localStorage.adminToken) {
      userInfo().then((res)=>{
        // console.log(res.data)
        this.userInfo =res.data
        console.log(this.userInfo.attr)
        for (let i = 0; i < this.userInfo.attr.length; i++) {
        if (this.userInfo.attr[i].attr_id == 1) {
          this.user_arrt_id = this.userInfo.attr[i].attr_val_id;
          this.params["attr_val_id"] = this.user_arrt_id;
          break;
        }
      }
      });
       
      
    }
    this.start = true;
    this.setDay();
    this.getotoCourseOptions();
  },
};
</script>

<style lang="scss" scoped>
.oto-page {
  min-height: 100vh;
  background: #f0f2f5;
  .head {
    width: 100%;
    height: 40px;
    background: white;
    display: flex;
    border-bottom: 1px solid #f4f4f4;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    span {
      flex: 1;
      text-align: center;
      font-size: 18px;
      line-height: 40px;
    }
    .right {
      text-align: right;
    }
  }
  .search {
    width: 38px;
    height: 40px;
    margin-top: 20px;
  }
  .oto-title {
    font-size: 28px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(140, 140, 140, 1);
    padding-top: 30px;
    padding-left: 20px;
  }
  .oto-filter {
    border-top: 2px solid #f5f5f5;
    position: relative;
    .of-head {
      width: 100%;
      display: flex;
      height: 40px;
      background: #fff;
      position: fixed;
      top:40px;
      div {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font {
          font-size: 15px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(140, 140, 140, 1);
        }
        i {
          width: 18px;
          height: 10px;
          background: url("../../assets/images/icon-down.png") no-repeat;
          background-size: 100% 100%;
          margin-left: 10px;
        }
      }
      div.active {
        font {
          color: #eb6100;
        }
        i {
          background: url("../../assets/theme-img/icon-up.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .time-module {
      margin: 8px;
      margin-top: 100px;
      height: 600px;
      .time-block {
        font-size: 15px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(89, 89, 89, 1);
        padding: 10px 0 10px 10px;
      }
      .time-date {
        background: #fff;
        border-radius: 8px;
        .time-week {
          font-size: 15px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(89, 89, 89, 1);
        }
        .time-day {
          display: flex;
          flex-wrap: wrap;
          padding-top: 20px;
          p {
            width: 14.28%;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            font {
              width: 40px;
              height: 40px;
              border-radius: 50px;
              font-size: 18px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              color: rgba(89, 89, 89, 1);
              text-align: center;
              line-height: 40px;
              position: relative;
              span {
                width: 60px;
                position: absolute;
                bottom: -35px;
                left: -4px;
                font-size: 15px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(183, 183, 183, 1);
              }
            }
            font.active {
              background: #eb6100;
              color: #fff;
            }
            font.today {
              background: #ebeefe;
              color: #eb6100;
            }
            font.disable {
              color: #b7b7b7;
            }
          }
        }
      }
      .time-rinle {
        margin-top: 20px;
        height: 188px;
        background: rgba(255, 255, 255, 1);
        border-radius: 8px;
        overflow: hidden;
        .tr-ipt {
          display: flex;
          margin-left: 10px;
          p {
            width: 190px;
            height: 35px;
            background: rgba(255, 255, 255, 1);
            border-radius: 8px;
            border: 2px solid rgba(191, 191, 191, 1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            input {
              border: none;
              width: 90px;
              height: 30px;
              line-height: 30px;
              font-size: 15px;
              padding-left: 10px;
            }
            i {
              width: 24px;
              height: 24px;
              background: url("../../assets/images/icon-time.png") no-repeat;
              background-size: 100% 100%;
              margin-right: 16px;
            }
          }
          font {
            width: 70px;
            height: 64px;
            line-height: 64px;
            text-align: center;
            color: rgba(183, 183, 183, 1);
            font-size: 28px;
          }
        }
      }
    }
    .teacher-module {
      padding: 0 10px 10px;
      background: #fff;
      border-top: 1px solid #f1f1f1;
      margin-top: 78px;
      margin-bottom: 50px;
      .tm-kind {
        border-bottom: 1px solid #f1f1f1;
        p {
          padding: 10px 0 10px;
          font-size: 15px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(89, 89, 89, 1);
        }
        .tmk-item {
          span {
            margin: 0 10px 10px 10px;
            display: inline-block;
            width: 70px;
            height: 40px;
            background: rgba(245, 245, 245, 1);
            border-radius: 6px;
            font-size: 15px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: #646464;
            text-align: center;
            line-height: 40px;
            &:nth-child(4n + 0) {
              margin-right: 0;
            }
          }
          span.active {
            color: #eb6100;
            background: #ebeefe;
          }
        }
        .van-checkbox__icon img {
          width: 15px;
          height: 15px;
        }
      }
      .van-checkbox-group {
        display: flex;
        .van-checkbox {
          margin-right: 60px;
        }
      }
    }
    .oto-btn {
      position: fixed;
      left: 0;
      right: 0;
      bottom: -5px;
      height: 44px;
      button {
        width: 50%;
        display: inline-block;
        line-height: 40px;
        height: 40px;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #eb6100;
        background: #fff;
        border: none;
        &:nth-child(2) {
          background: #eb6100;
          color: #fff;
        }
      }
    }
  }
  .oto-content {
    padding: 0 20px;
    .oc-item {
      display: flex;
      align-items: center;
      padding: 0 30px;
      background: #fff;
      border-radius: 8px;
      height: 162px;
      margin-top: 20px;
      img {
        width: 80px;
        height: 80px;
        margin-right: 24px;
        border-radius: 50%;
        flex: none;
      }
      div {
        flex: 1;
        p {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          &:nth-child(1) {
            padding-bottom: 6px;
            span {
              font-size: 30px;
              color: rgba(89, 89, 89, 1);
              line-height: 42px;
              padding-right: 10px;
            }
            font {
              font-size: 22px;
              color: rgba(234, 122, 47, 1);
            }
          }
          &:nth-child(2) {
            font-size: 24px;
            color: rgba(183, 183, 183, 1);
            line-height: 34px;
          }
        }
      }
      .Yuyue {
        flex: none;
        width: 140px;
        height: 62px;
        line-height: 62px;
        background: rgba(235, 238, 254, 1);
        border-radius: 31px;
        font-size: 28px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #eb6100;
        border: none;
        text-align: center;
      }
    }
  }
  .van-dialog {
    width: 566px;
    height: 691px;
    background: rgba(255, 255, 255, 1);
    border-radius: 30px;

    .van-dialog__content,
    .van-dialog__footer {
      text-align: center;
    }
    .close {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 23px;
      right: 26px;
      background-image: url("../../assets/images/icon_member_account_close.png");
      background-size: 100%;
      background-position: center;
    }
    img {
      width: 565px;
      height: 400;
      margin-top: 29px;
    }
    .LoginText {
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 44px;
    }
    .message {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 38px;
    }
    .van-button {
      width: 472px;
      height: 80px;
      background: rgba(235, 97, 0, 1);
      border-radius: 40px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 80px;
      margin-top: 57px;
    }
  }
  .van-picker__toolbar {
    height: 88px;
  }
}
.color {
  color: #eb6100;
}
</style>